<template>
  <div style="padding: 20px">
    <div class="title_font">
      添加新闻
    </div>
    <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
      <el-tab-pane label="banner" name="first">
        <div>
          <span class="title_styles">首页banner图：</span><span class="span_style">(轮播图片不超过3张)</span>
          <div class="div_flex">
            <el-upload
              v-model:file-list="fileList"
              action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
              list-type="picture-card"
              :on-preview="handlePictureCardPreview"
              :on-remove="handleRemove"
            >
              <el-icon><Plus /></el-icon>
            </el-upload>
            <el-dialog v-model="dialogVisible">
              <img w-full :src="dialogImageUrl" alt="Preview Image" />
            </el-dialog>
          </div>
        </div>
        <div>
          <span class="title_styles">金融页广告图：</span><span class="span_style">(图片不超过3张)</span>
          <div class="div_flex">
            <el-upload
              v-model:file-list="fileList"
              action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
              list-type="picture-card"
              :on-preview="handlePictureCardPreview"
              :on-remove="handleRemove"
            >
              <el-icon><Plus /></el-icon>
            </el-upload>
            <el-dialog v-model="dialogVisible">
              <img w-full :src="dialogImageUrl" alt="Preview Image" />
            </el-dialog>
          </div>
        </div>
        <div>
          <span class="title_styles">广告详情页：</span>
          <el-select v-model="select" placeholder="Select" class="el_style">
            <el-option label="跳转详情页" value="1" />
          </el-select>
          <div class="div_flex">
            <el-input
              v-model="textarea2"
              :autosize="{ minRows: 2, maxRows: 2 }"
              type="textarea"
              placeholder="Please input"
              style="margin-top: 10px;width: 500px"
            />
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane label="首页成交榜" name="second">
        <div class="flle" >
          <div class="flle">
            <div>
              <span class="title_styles">即时滚动数据：</span>
            </div>
            <div style="margin-left: 50px">
              <el-input
                type="text"
                style="height: 25px;margin-top: 5px;width: 200px"
                placeholder="Please input"/>
            </div>
            <img src="../../../../public/home.png" class="img_style1" >
          </div>
        </div>
        <button class="button_styles" >+新增</button>
        <el-divider />
        <div class="flle" >
          <div class="flle">
            <div>
              <span class="title_styles">首页成交数据：</span>
            </div>
            <div class="flle" style="margin-left: 50px;">
              <div>
                <span class="title_styles">1.</span>
              </div>
                <div style="margin-top:5px;margin-left: 10px">
                  <img src="../../../../public/home.png"  class="img_style2">
                </div>
              <div style="margin-left: 10px">
                <span class="title_styles">王子*</span>
              </div>
              <div style="margin-left: 100px">
                <span class="title_styles">成功贷款25000.00元</span>
              </div>
              <div style="margin-left: 80px">
                <span style="font-size: 14px;color: #165dff;font-weight: 400;text-decoration: underline">详情页内容</span>
              </div>
              <div style="margin-top: 3px;margin-left: 50px">
                <img src="../../../../public/home.png"  style="width: 15px;height: 15px">
              </div>
              <div style="margin-left: 10px">
                <span style="color:red;" class="title_styles">删除</span>
              </div>
            </div>
          </div>
        </div>
        <div style="margin-left: 150px">
          <el-divider />
          <div class="flle">
            <div>
              <span class="title_styles">头像：</span>
            </div>
            <div>
              <img src="../../../../public/home.png" style="margin-top: 10px; width: 35px;height: 35px;border-radius: 30px">
            </div>
            <div>
              <span class="title_styles" style="margin-left: 10px;color: rgb(140,140,140)">上传头像</span>
            </div>
            <div style="margin-left: 40px; width: 200px">
              <span class="title_styles" style="width: 50px">姓名：</span>
              <el-input style="height: 30px;width: 150px" v-model="input" placeholder="请输入姓名" />
            </div>
            <div style="margin-left: 40px;width: 200px">
              <span class="title_styles" style="width: 50px">标题：</span>
              <el-input style="height: 30px;width: 150px" v-model="input" placeholder="请输入标题" />
            </div>
          </div>
          <div>
            <span class="title_styles">详情页：</span>
            <el-input style="height: 30px;width: 560px" v-model="input" type="textarea" placeholder="请输入" />
          </div>
          <button class="button_styles add_button" >添加</button>
        </div>

      </el-tab-pane>
      <el-tab-pane label="消息通知" name="third">Role</el-tab-pane>
    </el-tabs>
  </div>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
import { Plus } from '@element-plus/icons-vue'

import type { UploadProps, UploadUserFile } from 'element-plus'

const fileList = ref<UploadUserFile[]>([])

const dialogImageUrl = ref('')
const dialogVisible = ref(false)
const textarea2=ref('')
const handleRemove: UploadProps['onRemove'] = (uploadFile, uploadFiles) => {
  console.log(uploadFile, uploadFiles)
}

const handlePictureCardPreview: UploadProps['onPreview'] = (uploadFile) => {
  dialogImageUrl.value = uploadFile.url!
  dialogVisible.value = true
}





import type { TabsPaneContext } from 'element-plus'

const activeName = ref('first')

const handleClick = (tab: TabsPaneContext, event: Event) => {
  console.log(tab, event)
}
</script>
<style>
.img_style2{
  width: 20px;
  height: 20px;
  border-radius: 30px;
}
.el_style{
  width: 150px;
  height: 20px;
}
.img_style1{
  width: 15px;
  height: 15px;
  margin-left: 10px;
  margin-top: 20px;
}
.flle{
  display: flex;
  justify-content: left;
}
.button_styles{
  background-color: #165dff;
  color: white;
  border: 0;
  width: 70px;
  height: 30px;
  border-radius: 3px;
  font-weight: 500;
  margin-left: 150px;

}
.add_button{
  margin-left: 500px;margin-top: 50px
}
.div_flex{
  display: flex;
  justify-content: left;
}
.title_styles{
  font-size: 14px;
  color: black;
  font-weight: 400;
}
.span_style{
  font-size: 14px;
  color: #165dff;
  font-weight: 400;
}
.demo-tabs > .el-tabs__content {
  padding: 32px;
  color: #6b778c;
  font-size: 32px;
  font-weight: 600;
}
</style>
